<template>
    <div>
      <!--面包屑导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
        <el-button type="primary">添加角色</el-button>
        <el-table  :data="rolesList" border  style="width: 100%" stripe>
          <!--展开列-->
          <el-table-column  type="expand">
            <template slot-scope="scope">
              <el-row v-for="(item1,index1) in scope.row.children" :key="item1.id">
                <!--渲染一级权限-->
                <el-col :span="5" ><el-tag closable @close="removeRbyId(scope.row,item1.id)">{{item1.authName}}</el-tag><i class="el-icon-caret-right"></i></el-col>
                <!--渲染二级和三级权限-->
                <el-col :span="19">
                  <el-row v-for="(item2,index2) in item1.children" :key="item2.id">
                    <!--二级渲染-->
                    <el-col :span="5">
                      <el-tag type="success" closable @close="removeRbyId(scope.row,item2.id)">{{item2.authName}}</el-tag><i class="el-icon-caret-right"></i>
                    </el-col>
                    <!--三级渲染-->
                    <el-col  :span="19" >
                      <el-tag v-for="(item3,index3) in item2.children"  :key="item3.id" closable type="warning" @close="removeRbyId(scope.row,item3.id)">{{item3.authName}}</el-tag>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </template>
          </el-table-column>
          <!--<!-idnex索引列&ndash;&gt;-->
          <el-table-column  type="index"></el-table-column>
          <el-table-column   prop="roleName"  label="角色名称"   > </el-table-column>
          <el-table-column   prop="roleDesc"  label="角色描述"   > </el-table-column>
          <el-table-column  label="操作"   >
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
              <el-button type="warning" icon="el-icon-delete" size="mini">删除</el-button>
              <el-button type="danger"   icon="el-icon-setting" size="mini" @click="showSetRightDialog(scope.row)">分配权限</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!--权限分配对话框-->
      <el-dialog    title="分配权限"  :visible.sync="rightDialogVisible" width="50%" >
        <!--树形控件-->
        <el-tree :data="rightsList" :props="treeProps"   show-checkbox node-key="id" :default-expand-all="true" :default-checked-keys="defkeys" ref="treeRef"></el-tree>
        <span slot="footer" class="dialog-footer">
          <el-button @click="rightDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveCheckdRights">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
  export default {
    name: 'Roles',
    created () {
      this.getRolesList();
    },
    data: function () {
      return {
        rolesList: [],
        rightsList:[],
        rightDialogVisible:false,
       /* 树形控件的属性绑定对象*/
        treeProps:{
          label: 'authName',
          children:'children'
        },
        /*默认选中的商品的数组*/
        defkeys:[],
        roleId:''
      }
    },
    methods: {
      async getRolesList () {
        var data = await this.$axios.get("roles");
        var res = data.data;
        if (res.meta.status != 200) {
          return this.$message.error("获取角色失败!")
        }
        this.rolesList = res.data;
      },
      removeRbyId (role,id) {
        this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          console.log(role)
          var data=await this.$axios.delete("roles/"+role.id+"/rights/"+id);
          var res=data.data;
          console.log(res)
          if(res.meta.status!=200){ return  this.$message.error("权限删除失败!")}
          role.children=res.data;
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
     /* 显示分配权限的对话框*/
      async showSetRightDialog(role){
        this.roleId=role.id;
        /*获取所有权限数据*/
       var data=await this.$axios.get('rights/tree');
       var res=data.data;
       if(res.meta.status!=200){return this.$message.error("获取权限失败!")}
       //将获取到的数据保存到data中
       this.rightsList=res.data;
        console.log(this.rightsList);
        //递归获取三级权限数组
        this.defkeys=[];
        this.getLeafKeys(role,this.defkeys);
        this.rightDialogVisible=true;
      },
      //通过递归的方式获取角色下所有三级权限id，并保存到defkeys数组中
      getLeafKeys(node,arr){
        //如果当前node不包含children属性,是三级节点
          if(!node.children){
            return arr.push(node.id);
          }
          node.children.forEach(item=>{
            this.getLeafKeys(item,arr);
          });
      },
      //弹出窗口点击保存按键的事件
      async saveCheckdRights(){
        //this.$refs 这里是refs不是ref，否则报错
        var arr1=this.$refs.treeRef.getCheckedKeys();
        var arr2=this.$refs.treeRef.getHalfCheckedKeys();
        var idstr = arr1.join(",")+','+arr2.join(",");
        console.log(idstr)
        //通过接口更新角色的权限
       var data=await this.$axios.post("roles/"+this.roleId+"/rights",{rids: idstr});
       var res=data.data;
       if(res.meta.status!=200){return this.$message.error("分配权限失败!")}
       this.$message.success("分配权限成功!");
       this.getRolesList();
       this.rightDialogVisible=false;

      }
    }
  }
</script>

<style lang="less" scoped>
.el-table{
  margin-top: 15px;
}
  .el-tag{
    margin: 10px;
    margin-bottom: 5px;

  }
  .el-row{

    border-bottom: 1px solid #ccc;
  }
</style>
